<script setup lang='ts'>
import type { VxeGridProps } from 'vxe-table'

import { useTag } from '@/pages/home/component/useTag'
import router from '@/router'
import { useBiddingDel, useBiddingPublic, useBiddingUpdate, useGetBiddingPage } from '@fl/api/man-api'
import { SearchForm, SearchTable } from '@fl/components'
import ButtonItem from '@fl/components/button-item.vue'
import { ElButton, ElCard } from 'element-plus'
import { cloneDeep } from 'lodash-es'
import { computed, ref } from 'vue'

const { category } = useTag()

const initialState = {
    category: '',
    noticeName: '',
    noticeState: '',
}
const initialTablePage = {
    currentPage: 1,
    pageSize: 10,
    total: 0,
}

const status = [
    {
        label: '全部',
        value: '',
    },
    {
        label: '已发布',
        value: 1,
    },
    {
        label: '未发布',
        value: 2,
    },
]

const btns = [
    {
        label: '编辑',
        permission: ['1', '2'],
        value: 'edit',
    },
    {
        label: '发布',
        permission: ['2'],
        value: 'publish',
    },
    {
        label: '撤回',
        permission: ['1'],
        value: 'reset',
    },
    {
        label: '删除',
        permission: ['1', '2'],
        value: 'delete',
    },
]

const tablePage = ref(cloneDeep(initialTablePage))
const state = ref(cloneDeep(initialState))

const params = computed(() => ({
    ...state.value,
    page: tablePage.value.currentPage,
    size: tablePage.value.pageSize,
}))

const { data, isLoading, refetch } = useGetBiddingPage(params)

const columns = [
    {
        colProps: {
            span: 8,
        },
        label: '公告标题',
        prop: 'noticeName',
    },
    {
        colProps: {
            span: 8,
        },
        label: '公告类型',
        options: [
            {
                label: '全部',
                value: '',
            },
            ...category,
        ],
        prop: 'category',
        valueType: 'select',
    },
    {
        colProps: {
            span: 8,
        },
        label: '状态',
        options: status,
        prop: 'noticeState',
        valueType: 'select',
    },

]

const gridOptions = reactive<VxeGridProps>({
    columns: [
        // { type: 'checkbox', width: 70 },
        { field: 'noticeName', title: '公告标题' },
        // { field: 'a3', title: '项目名称' },
        { slots: { default: 'category' }, title: '公告类型' },
        { field: 'createTime', title: '创建时间' },
        { slots: { default: 'noticeState' }, title: '状态' },
        { slots: { default: 'operate' }, title: '操作', width: 250 },
    ],
    toolbarConfig: {
        slots: {
            buttons: 'toolbar_buttons',
        },
    },
})

function doAction(item: any, row: any) {
    switch (item.value) {
        case 'edit':
            doEdit(row.id)
            break
        case 'delete':
            doDel(row.id)
            break
        case 'publish':
        case 'reset':
            updateStatus(row)
            break
        default:
            break
    }
}

const { mutate: publicMutate } = useBiddingPublic()
async function batchPublic(ids: any) {
    publicMutate(ids, {
        onSuccess: () => {
            afterSuccess()
        },
    })
}

const { mutate: updateMutate } = useBiddingUpdate()
async function updateStatus(row: any) {
    const noticeState = `${row.noticeState}` === '1' ? 2 : 1
    updateMutate({ id: row.id, noticeState }, {
        onSuccess: () => {
            afterSuccess()
        },
    })
}

const { mutate } = useBiddingDel()
function doDel(id: any) {
    mutate(id, {
        onSuccess: () => {
            afterSuccess()
        },
    })
}

function afterSuccess() {
    ElMessage({ message: '操作成功', type: 'success' })
    refetch()
}

function doEdit(id: any) {
    router.push({
        path: '/operations-pages/bidding/announcement-add',
        query: {
            id,
        },
    })
}

function doAdd() {
    router.push('/operations-pages/bidding/announcement-add')
}

function filterCol(opts, key) {
    const target: any = opts.find((v: any) => `${v.value}` === key)

    return target?.label ?? key
}

function getData(val: any) {
    tablePage.value.currentPage = 1
    state.value = {
        ...val,
    }
}

function reset() {
    state.value = cloneDeep(initialState)
    tablePage.value = cloneDeep(initialTablePage)
}

function checkboxChange(val: any) {
    console.log(777, val, batchPublic)
}

watchEffect(() => {
    if (data.value) {
        tablePage.value.total = data.value.total
    }
})
</script>

<template>
    <ElCard shadow="never">
        <SearchForm v-bind="state"
                    :columns="columns"
                    submit-text="查询"
                    class="mb-20"
                    @submit="getData"
                    @reset="reset"
        />

        <SearchTable v-bind="gridOptions"
                     v-model:pager="tablePage"
                     :data="data?.records"
                     @checkbox-change="checkboxChange"
        >
            <template #toolbar_buttons>
                <ElButton v-loading.fullscreen.lock="isLoading"
                          type="primary"
                          @click="doAdd"
                >
                    新增
                </ElButton>

                <!-- <ElButton @click="batchPublic">
                    批量发布
                </ElButton> -->
            </template>

            <template #category="{ row }">
                <span>{{ filterCol(category, row.category) }}</span>
            </template>

            <template #noticeState="{ row }">
                <span>{{ filterCol(status, row.noticeState) }}</span>
            </template>

            <template #operate="{ row }">
                <div class="text-#dA0004 flex gap-15 justify-center">
                    <ButtonItem :btns="btns"
                                :permission="row.noticeState"
                                @btn-click="doAction($event, row)"
                    />
                </div>
            </template>
        </SearchTable>
    </ElCard>
</template>
